<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class>起止时间</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">专业技术工作名称（项目、课题、成果等）</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">工作内容，本人起何作用（主持、参加、独立完成）</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">完成情况及效益（获何奖励、专利）</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="beginningAndEndingTime"
        
        />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="professionalAndTechnicalJobTitle"
      
        />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="jobContent"
         
        />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="completionStatusAndBenefits"
       
        />
        </div>
      </el-col>
    </el-row>

    <!-- <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%;height:300px"
      border
      fit
      :row-style="rowHeight"
    >
      <el-table-column prop="date" label="起止时间">
        <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="beginningAndEndingTime"
          placeholder="1111"
        />
      </el-table-column>
      <el-table-column prop="name" label="专业技术工作名称（项目、课题、成果等）">
        <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="professionalAndTechnicalJobTitle"
          placeholder="1111"
        />
      </el-table-column>
      <el-table-column prop="address" label="工作内容，本人起何作用（主持、参加、独立完成）">
        <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="jobContent"
          placeholder="1111"
        />
      </el-table-column>
      <el-table-column prop="address2" label="完成情况及效益（获何奖励、专利）">
        <input
          type="text"
          style="width:200px; height:200px; border:none;outline:none;"
          v-model="completionStatusAndBenefits"
          placeholder="1111"
        />
      </el-table-column>
    </el-table> -->
    <div>
      <div class="p_css">
        <p>“工作内容，本人起何作用”主要填写承担的任务及完成情况，以及名次排序。</p>
        <p>“完成情况及效益”，主要填社会及经济效益，要有数量概念。</p>
      </div>
      <div>
        <!-- 分页 -->
        <div class="block page_css">
          <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;float:right">
      <el-button @click="add(tableData[1])" plain class="btn_css_er" size="small">保存</el-button>
      <el-button @click="setCurrent2(tableData[1])" plain class="btn_css_si" size="small">上传附件</el-button>
      <el-button @click="setCurrent2(tableData[1])" plain class="btn_css_si" size="small">查看附件</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      str: "",
      currentRow: null,
      beginningAndEndingTime: "",
      professionalAndTechnicalJobTitle: "",
      jobContent: "",
      completionStatusAndBenefits: "",
      tableData: [
        {
          beginningAndEndingTime: "",
          professionalAndTechnicalJobTitle: "",
          jobContent: "",
          completionStatusAndBenefits: ""
        }
      ]
    };
  },
  methods: {
    add(row) {
      this.$axios({
        url: "/performanceStatement/add",
        method: "post",
        data: {
          beginningAndEndingTime: this.beginningAndEndingTime,
          professionalAndTechnicalJobTitle: this
            .professionalAndTechnicalJobTitle,
          jobContent: this.jobContent,
          completionStatusAndBenefits: this.completionStatusAndBenefits
        }
      }).then(res => {
        console.log(res);
      });

      // console.log(row);
      // this.$refs.singleTable.setCurrentRow(row);
      // console.log(
      //   this.$refs.singleTable.columns,
      //   this.$refs.singleTable.setCurrentRow(row)
      // );
    },
    setCurrent2(row) {
      console.log(row);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentRow = val;
    },

    /* 改变行的高度 */
    rowHeight({ row, rowIndex }) {
      // console.log({row, rowIndex});
      if (rowIndex === 0) {
        return { height: "200px" };
      }
    }
  },
  // mounted(){

  // },
  // mounted() {
  //   sessionStorage.setItem("activeIndex", 1);
  // }
  mounted(){
    sessionStorage.setItem("fName", 'Process8');
  },
};
</script>
<style scoped lang="less">
.el-row {
  font-size: 13px;
  text-align: center;
  border: 1px solid #ddd;
  &:first-child{
      height: 45px;
      // line-height: 45px;
      padding-top: 10px;
      
    }
  &:last-child {
     .el-col {
    border-right: 1px solid #ddd;
    // border-right: 1px solid #ddd;
    
  }
  }
 
}
.page_css {
  margin: 10px;
  text-align: right;
}
// .el-table-column:hover {
//   input {
//     background-color: #f5f7fa;
//   }
// }
.el-table {
  font-size: 13px;
}
.btn_css_newadd {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  text-align: center;
}
.btn_css_er {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 60px;
  height: 30px;
  text-align: center;
}
.btn_css_si {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 80px;
  height: 30px;
  text-align: center;
}
.btn_css_bord {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 80px;
  height: 40px;
  font-size: 14px;
  text-align: center;
}
.p_css {
  float: left;
  p {
    color: red;
    font-size: 14px;
  }
}
.btn_css {
  width: 150px;
  height: 40px;
  display: block;
  margin: 30px auto;
}
.col_css {
  width: 340px;
}
.TabNav {
  height: 30px;
}
.add_first_row {
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
}
</style>